<template>
  <div>
    <!-- 
			语法:
 				@事件名.修饰符="methods里函数"

 				  .stop - 阻止事件冒泡
 				  .prevent - 阻止默认行为
 				  .once - 程序运行期间, 只触发一次事件处理函数
		 -->

    <div @click="fatherFn">
      <p @click.stop="oneFn">.stop - 阻止事件冒泡</p>

      <a href="http://www.baidu.com" @click.prevent.stop="threeFn"
        >阻止跳转---------- 去百度</a
      >

      <p @click.once="twoFn">点击观察事件处理函数执行几次</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn() {
      console.log("fahter-触发click事件");
    },
    oneFn() {
      console.log("p标签点击了，stop - 阻止事件冒泡");
    },
    twoFn() {
      console.log("点击观察事件处理函数执行几次");
    },
    threeFn() {
      console.log("点击了a标签，阻止跳转,阻止冒泡");
    },
  },
};
</script>

<style>
</style>
